<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:t="http://myfaces.apache.org/tomahawk">
<h:head>
	<title></title>
	<h:outputStylesheet library="css" name="style.css" />
</h:head>
<h:body>
	<ui:include src="header.xhtml" />
	<c:if test="${userlogin !=null}">
		<div style="height: 800px" align="center">
			<br />
			<h:form id="groupSearchform">
				<h:outputLabel value="Name of your desired group" for="groupName" />
				<h:inputText id="groupName" value="#{searchBean.groupName}"
					required="false" />
				<h:commandButton value="Find" id="findButton"
					action="#{searchBean.searchGroup}" />
			</h:form>
			<div align="center" class='searchingBackground'>
				<h:form>
					<h:panelGroup rendered="#{not empty searchBean.groups }">
						<h:dataTable value="#{searchBean.groups}" var="group"
							rendered="#{not empty searchBean.groups}" styleClass="userTable"
							headerClass="headerTable" columnClasses="normal,centered">

							<h:column>
								<f:facet name="header">
									<h:column>
										<h:outputText value="Name" />
									</h:column>
								</f:facet>
								<h:outputText value="#{group.nameGroup}" />
							</h:column>
							<h:column>
								<f:facet name="header">
									<h:column>
										<h:outputText value="" />
									</h:column>
								</f:facet>
								<h:panelGrid columns="1">
									<h:commandLink value="Join" action="#{searchBean.joinGroup}">
										<f:setPropertyActionListener
											target="#{searchBean.selectedGroup}" value="#{group}" />
									</h:commandLink>
								</h:panelGrid>
							</h:column>

						</h:dataTable>
					</h:panelGroup>
				</h:form>
			</div>

		</div>
		<ui:include src="footer.xhtml" />

	</c:if>

</h:body>
</html>
